@use "../../assets/scss/fun/index" as fn;
html {
  box-sizing: border-box;
  //根元素字体大小；10 / 16 = 62.5%，采用rem单位时，1rem = 10px
  font-size: 62.5%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  width: 100%;
  height: 100vh;
  background-color: black;
  font-family: sans-serif;
}

.light {
  background: linear-gradient(#b2b2b2, #1f1f1f);
  width: 240px;
  height: 30px;
  position: absolute;
  margin-top: -15px;
  margin-left: -100px;
  top: 50%;
  left: 50%;
  border-radius: 5px;
  animation: burn-out 2s infinite;
  &::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 30px;
    top: 0;
    left: 20px;
    background-color: white;
    box-shadow: 0 0 120px 15px white;
  }
}
@keyframes burn-out {
  $opacity: 1;
  @for $i from 1 through 8 {
    #{percentage(calc($i * 3 / 100))} {
      opacity: $opacity;
      @if $opacity==0 {
        $opacity: 1;
      } @else {
        $opacity: 0;
      }
    }
  }
  25%,
  57%,
  60%,
  70%,
  97% {
    opacity: 0.1;
  }
  63%,
  100% {
    opacity: 1;
  }
}

.polygon {
  width: 300px;
  height: 300px;
  background: url("https://picsum.photos/id/1002/400/300") no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 70%;
  clip-path: fn.polygon_clip(3);
}
